<template>
  <div class="city" ref="box">
    <!-- @click="handleClick" -->
    <div class="city_name" ref="cityName" @click="toggle">
      <!-- 广东省 广州市 白云区 -->
      {{address.fullLocation}}
      <i class="el-icon-arrow-down"></i>
    </div>
    <div class="city_options" ref="cityOptions" v-show="isShow">
      <ul>
        <li
          v-for="(item,idx) in currentList"
          :key="idx"
          @mouseover="activeIdx = idx"
          @mouseout="activeIdx = null"
          @click="changeItem(item)"
          :class="{ active: activeIdx === idx }"
        >
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

const getCityData = () => {
  return new Promise((resolve) => {
    if (window.cityData) {
      resolve(window.cityData)
    } else {
      // 获取城市列表的地址
      const url = 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
      axios.get(url).then(({ data }) => {
        // console.log('res', data)
        window.cityData = data
        resolve(window.cityData)
      })
    }
  })
}
export default {
  name: 'City',
  data () {
    return {
      a: '',
      isShow: false,
      activeIdx: null,
      cityList: [],
      // currentList: [],
      address: {
        fullLocation: '请选择配送地址',
        provinceCode: '',
        province: '',
        cityCode: '',
        city: '',
        countCode: '',
        count: ''
      }

    }
  },
  computed: {
    currentList () {
      // console.log('computed', this.address.provinceCode)
      // console.log('a', this.a)

      const address = { ...this.address }
      console.log('this.address', address)
      console.log('address.cityCode', address.cityCode)
      let list = this.cityList
      if (address.provinceCode) {
        // console.log('...', this.address.provinceCode)
        list = this.cityList.find(v => v.code === address.provinceCode).areaList
      } else if (address.cityCode) {
        console.log('list', list)

        this.$nextTick(() => {
          list = list.find(v => v.code === address.cityCode).areaList
        })
      }
      // else if (this.address.countCode) {
      //   list = list.find(v => v.code === this.address.countCode).areaList
      // }
      return list
    }
  },
  // watch: {
  //   address: {
  //     handler (a) {
  //       console.log('a', a)
  //       // this.currentList
  //     },
  //     deep: true
  //   }
  // },
  mounted () {
    document.addEventListener('click', (e) => {
      // console.log('e', e)
      const box = this.$refs.box
      // 判断当前点击的点是否在当前组件中
      const isOutSide = !box.contains(e.target)
      // console.log('在外面', isOutSide)
      if (isOutSide) {
        // 鼠标点击了目标外面，隐藏地址选择框
        this.hide()
      } else {
        // 鼠标点击了目标里面，显示地址选择框
        this.show()
      }
    })
  },
  methods: {
    // 点击配送地址
    toggle () {
      this.isShow ? this.show() : this.hide()
    },
    show () {
      this.isShow = true
      this.getCityData()
    },
    hide () {
      this.isShow = false
    },

    // 获取城市数据
    getCityData () {
      getCityData().then(res => {
        // console.log('res', res) // TODO:
        this.cityList = res
      })
    },
    // 修改省市区
    changeItem (item) {
      console.log('item', item)
      if (item.level === 0) {
        this.a = item.name
        this.address.province = item.name
        this.address.provinceCode = item.code
        this.address.fullLocation = item.name
      } else if (item.level === 1) {
        this.a = item.name

        this.address.city = item.name
        this.address.cityCode = item.code
        this.address.fullLocation += item.name
        console.log('address', this.address)
      } else if (item.level === 2) {
        this.a = item.name

        this.address.count = item.name
        this.address.countCode = item.code
        this.hide()
        this.address.fullLocation += item.name

        // const { province, city, count } = this.address
        // this.address.fullLocation = province + city + count
      }
    }

  }
}
</script>

<style lang="less" scoped>
.city {
  position: relative;
  &_name {
    line-height: 20px;
    border: 1px solid #ccc;
    margin-left: 10px;
    padding: 0 5px;
    cursor: pointer;
  }
  &_options {
    position: absolute;
    left: 10px;
    top: 22px;
    width: 600px;
    border: 1px solid #ccc;
    background-color: #fff;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        margin: 5px 0;
        padding: 10px 0;
        width: 25%;
        cursor: pointer;
        &.active {
          background-color: #ccc;
        }
      }
    }
  }
}
</style>
